<template>
    <div id="audio-bar" class="flex-grow flex flex-row flex-nowrap gap-4 justify-between items-center px-4 py-2">
        <div class="flex flex-row flex-nowrap gap-8">
            <go-start theme="filled" size="32" fill="#e62525" @click="prev" class="cursor-pointer" />
            <div @click="pause" class="w-8 cursor-pointer">
                <pause-one v-if="playing" theme="filled" size="32" fill="#e62525" />
                <play v-else theme="filled" size="32" fill="#e62525" />
            </div>
            <go-end theme="filled" size="32" fill="#e62525" @click="next" />
        </div>
        <div class="flex-grow max-w-96 flex flex-row flex-nowrap justify-center items-center gap-2 text-xs">
            <div>{{ "01:02" }}</div>
            <el-slider v-model="process" size="small" class="min-w-24" />
            <div>{{ "03:06" }}</div>
        </div>
        <div class="flex flex-row flex-nowrap gap-4">
            <div class="min-w-32 flex flex-row items-center">
                <div @click="volumeIcon" class="cursor-pointer">
                    <volume-mute v-if="volume == 0" theme="filled" size="18" fill="#e62525" />
                    <volume-notice v-else-if="volume > 0.8" theme="filled" size="18" fill="#e62525" />
                    <volume-small v-else theme="filled" size="18" fill="#e62525" />
                </div>
                <el-slider v-model="volume" max="1" step="0.05" size="small" class="ml-2" />
            </div>
            <div>
                <music-list theme="filled" size="24" fill="#e62525" @click="menu" class="cursor-pointer" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { GoStart, Play, PauseOne, GoEnd, VolumeMute, VolumeSmall, VolumeNotice, MusicList } from '@icon-park/vue-next';

const process = defineModel('process', { required: true, default: 0 })
const volume = defineModel('volume', { required: true, default: 0.6 })

defineProps<{ 'playing': boolean }>()

const emit = defineEmits<{
    (e: 'prev'): void;
    (e: 'pause'): void;
    (e: 'next'): void;
    (e: 'menu'): void;
}>()

const volumeIcon = () => {
    volume.value = volume.value == 0 ? 0.6 : 0;
}

const prev = () => emit('prev')
const pause = () => emit('pause')
const next = () => emit('next')
const menu = () => emit('menu')
</script>

<style scoped>
:deep(.el-slider__button) {
    width: 8px;
    height: 8px;
}

:deep(.el-slider__button-wrapper) {
    width: 10px;
}
</style>